<template>
  <div class="home">
     <div class="left">
        <div class="title" v-show="!state.isHelp">
            <div  :class="state.searchObj.status=== 1 ? 'titleItem active' : 'titleItem' " @click="activeTabChange(1)">进行中</div>
            <div  :class="state.searchObj.status=== 2 ? 'titleItem active' : 'titleItem' " @click="activeTabChange(2)">待审核</div>
            <div  :class="state.searchObj.status=== 3 ? 'titleItem active' : 'titleItem' " @click="activeTabChange(3)">已审核</div>
            <div  :class="state.searchObj.status=== 5 ? 'titleItem active' : 'titleItem' " @click="activeTabChange(5)">已放弃</div>
        </div>
        <div class="title" v-show="state.isHelp" >
            <div @click="goBack" class="titleItem" style="color:#1890FFFF;font-weight: 100;padding: 6px 30px;border: 1px solid #1890FFFF;">返回</div>
        </div>
        <div class="content">
              <div class="contentArr">
                  <div v-if="!state.tableData.length" class="el-center">
                    <div class="svg">
                      <svg class="icon-svg banner-img" aria-hidden="true">
                        <use xlink:href="#icon-home-banner"></use>
                      </svg>
                      <div class="color">空空如也~</div>
                    </div>
                  </div>
                  <taskContent :tableData="state.tableData" @godetail="goDetailTask" types="2"
                       @goseekhelpdetail="goSeekHelpDetail" @edit="edit" @deletes="deletes"
                               :searchObj="state.searchObj" @hadletask="hadleTask"
                  ></taskContent>
              </div>

             <div class="foot" v-if="state.total > 10">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page=state.currentPage
                  :page-sizes="[10, 20, 30, 40]" background
                  :page-size="10"
                  layout=" prev, pager, next, sizes, jumper"
                  :total="state.total">
                </el-pagination>
              </div>
        </div>
     </div>
     <div class="right">
        <div class="rightTop">
            <user-login @gocheckhelp="checkHelp" type="2"></user-login>
        </div>
        <div class="rightBottom">
            <div class="title">
              消息公告
            </div>
            <user-message></user-message>
        </div>
     </div>
  </div>
</template>
<script>
// vue3 弃用了beforeCreate created
import {getCurrentInstance,ref,reactive,onMounted,onUpdated,onUnmounted,onActivated,onDeactivated} from 'vue'
import { useRouter } from 'vue-router'
import userMessage from '@/components/user/userMessage'
import userLogin from '@/components/user/userLogin'
import taskContent from '@/components/user/taskContent'
const state = reactive({
  isHelp: false,
  currentPage: 1 ,
  total: 0 ,
  searchObj:{
    page: 1,
    pageSize: 7,
    status : 2,
  },
  resData:[ ],
  NoticeArr:[],
  tableData: [
  ],
});
function handleClick(tab, event){
     console.log(tab, event);
};


export default {
  name: 'TaskList',
  components: {userMessage,userLogin,taskContent},
  // setup(props,ctx){
  setup(props,{emit}){
    const ctx = getCurrentInstance();
    const _this = ctx.appContext.config.globalProperties
    const router = useRouter();
    function goSeekHelpDetail (_item){
      // console.log(_item);
      router.push({
        name:'taskSeekHelpDetail',
        query:{
          id: _item.id
        }
      })
    };
    function handleSizeChange (_size){
      console.log(_size);
      state.searchObj.pageSize = _size
      getList()
    };
    function handleCurrentChange(val){
      if (val !== state.searchObj.page) {
        state.searchObj.page = val
        return getList()
      }
    };
    function hadleTask(_params,_id){
      if (_params == 3) {
          //审核
          examine(_params,_id);
      } else if(_params == 1) {
          //驳回
          reject(_params,_id);
      }

    }
    const reject = (_params,_id) => {
      _this.$prompt('请输入驳回的理由', '提示', {
        confirmButtonText: '确定驳回',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        if(value == null){
          _this.$message.error('请输入驳回的理由')
          return false
        }
        _this.$request({
          url: "?s=Learn.Task.ExaRecTask",
          params: {
            status: _params,
            task_id: _id,
            reason: value
          },
        })
          .then(res => {
            console.log(res);
            if (res.ret === 200) {
              let tip = _params == 1 ? '驳回成功' : '审核成功'
              _this.$message.success(tip)
              getList()

            } else {
              _this.$message.error(res.msg)
            }

          });
      })
    }

    const examine = (_params,_id) => {
      _this.$confirm("审核通过后奖励即可到账", "您确定要审核该任务吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
        _this.$request({
          url: "?s=Learn.Task.ExaRecTask",
          params: {
            status: _params,
            task_id: _id,
            reason: ''
          },
        })
          .then(res => {
            console.log(res);
            if (res.ret === 200) {
              let tip = _params == 1 ? '驳回成功' : '审核成功'
              _this.$message.success(tip)
              getList()

            } else {
              _this.$message.error(res.msg)
            }

          });
      })
    }
    function getList(_type){
      let url = !_type ? '?s=Learn.Task.GetExaRecTask' : '?s=Learn.Task.GetRecHelp'
      let params = {
        page : state.searchObj.page,
        pageSize : state.searchObj.pageSize,
        status : !_type ? state.searchObj.status : '',
      }
      _this.$request({
          url,
          params,
        })
        .then(res=>{
            console.log(res);
            if(res.ret===200){
              let{total,data} = res.data
              state.total = total
              state.tableData = data
            }else{
              _this.$message.error('获取数据失败。')
            }
        });
    };

    onMounted(()=>{
        // alert('页面加载')
        if (state.isHelp) {
          getList('isHelp')
        }else{
          getList();
        }
    });
    function activeTabChange(_index){
        state.searchObj.status = _index ;
        getList()
    };
    function goDetailTask(index,rec_id){
      localStorage.setItem('is_file',1);
      router.push({
        name:'basicListDetail',
        query:{
          id: index,
          rec_id: rec_id
        }
      })
    }
    function checkHelp(params){
      console.log(params);
      state.isHelp = params
      getList('isHelp')
    }
    function goBack(){
      state.isHelp = false
      getList()
    }
    onUnmounted(()=>{
      // alert('销毁哦');
    })
    onActivated(()=>{
      // alert('被激活')
    })
    onDeactivated(()=>{
      // console.log('取消激活');
    })
    return{
      state,
      handleClick,
      router,
      goSeekHelpDetail,
      handleSizeChange,
      handleCurrentChange,
      activeTabChange,
      hadleTask,
      goDetailTask,
      checkHelp,
      goBack,
    }
  },

}
</script>
<style lang="scss" scoped>
.svg {
    text-align: center;
    .banner-img{
      font-size: 364px;
    }
  }
  .color {
    color: #a0a7b5;
  }


.home {
  display: flex;
  width: 100%;
  height:  calc(calc(100vh - 64px) - 40px - 70px);
   .left {
      flex: 2;
      background-color: #fff;
      height: 100%;
      margin-right: 24px;
      .title {
        display: flex;
        border-bottom: 1px solid #E9E9E9;
        box-sizing: border-box;
        align-items: center;
        height: 55px;
          .active{
            // border-bottom: 2px solid #1890FFFF;
            color: #1890FFFF !important;
            position: relative;
          }
          .active:after{
            content:'';
            position: absolute;
            bottom: -102%;
            left: 0%;
            height: 2px;
            width: 50px;
            background-color: #1890FFFF;
          }
          .titleItem {
            margin-left: 32px;
            font-size: 16px;
            font-weight: 600;
            color: #888888FF;
            cursor: pointer;
          }
      }

      .content {
        padding-left: 23px;
        padding-top: 12px;
        display: flex;
        flex-direction: column;
        height: calc(calc(100vh - 64px) - 40px - 70px - 55px);
        .contentArr{
            display: flex;
            flex-direction: column;
        }

        .foot{
          flex: 1;
          margin-top: 10px;
          display: grid;
          place-items: center;
        }
      }
   }

   .right {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      .rightTop {
          background-color: #fff;
          flex: 2;
          display: flex;
          flex-direction: column;
          margin-bottom: 24px;
          .title {
            border-bottom: 1px solid #E9E9E9;
            padding-left: 24px;
            display: flex;
            align-items: center;
            font-size: 16px;
            height: 55px;
          }
          .panel {
               flex: 1;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               .img {
                  margin-bottom: 35px;
                  width: 106px;
                  height: 106px;
                  border-radius: 50%;
                  img{
                    width: 100%;
                    height: 100%;
                  }
               }

               .name {
                  margin-bottom: 35px;
                  color: #000000D9;
                  font-size: 20px;
                  font-weight: 600;
               }

                .itemArr {
                  display: flex;
                  width: 85%;
                  .item {
                    &:nth-child(3) {
                      border: 0;
                    }
                    flex: 1;
                    align-items: center;
                    display: flex;
                    flex-direction: column;
                    border-right: 1px solid #E9E9E9FF;

                     &:nth-child(2) .itemName:before{
                         background-color: #FACC14FF;
                     }
                     &:nth-child(3) .itemName:before{
                           background-color: #2FC25BFF;
                     }
                    .itemName {
                      color: #00000073;
                      font-size: 14px;
                      position: relative;
                          &:before{
                              content: '';
                              position: absolute;
                              top: 5px;
                              left: -20%;
                              display: block;
                              background-color: #1890FFFF;
                              width: 6px;
                              height: 6px;
                              border-radius: 50%;
                          }
                    }

                    .itemNum {
                      margin-top: 9px;
                      color: #000000D9;
                      font-size: 24px;
                    }
                  }
                }

                .btnArr{
                  margin-top: 34px;
                  display: flex;
                  width: 95%;
                  justify-content: space-evenly;
                  span {
                    &:nth-child(2) {
                      background: #FACC14FF;
                      }
                    &:nth-child(3) {
                      background: #2FC25BFF;
                    }
                    background: #1890FFFF;
                    font-size: 14px;
                    color: #fff;
                    padding: 6px 16px;
                    cursor: pointer;
                  }
                }
          }
      }

      .rightBottom {
          background-color: #fff;
          flex: 1;
            .title {
                  border-bottom: 1px solid #E9E9E9;
                  padding-left: 24px;
                  display: flex;
                  align-items: center;
                  font-size: 16px;
                  height: 55px;
            }

      }
   }
}
</style>
